<template>
  <div class="blog-page">
    <div class="container">
      <!-- 页面头部 -->
      <div class="page-header fade-in">
        <h1 class="page-title gradient-text">博客文章</h1>
        <p class="page-subtitle">记录学习与思考的点滴</p>
      </div>

      <!-- 搜索和筛选 -->
      <div class="filters fade-in" style="animation-delay: 0.1s">
        <div class="search-box glass">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="🔍 搜索文章..."
            class="search-input"
          />
        </div>

        <div class="tags">
          <button
            v-for="tag in tags"
            :key="tag"
            :class="['tag-btn', { active: selectedTag === tag }]"
            @click="selectTag(tag)"
          >
            {{ tag }}
          </button>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="posts-list">
        <article
          v-for="(post, index) in filteredPosts"
          :key="post.id"
          class="post-item card hover-lift fade-in"
          :style="`animation-delay: ${index * 0.1}s`"
          @click="navigateTo(`/blog/${post.slug}`)"
        >
          <div class="post-header">
            <div class="post-tags">
              <span class="post-tag">{{ post.category }}</span>
            </div>
            <div class="post-date">{{ formatDate(post.date) }}</div>
          </div>

          <h2 class="post-title">{{ post.title }}</h2>
          <p class="post-description">{{ post.description }}</p>

          <div class="post-footer">
            <div class="post-meta">
              <span>⏱️ {{ post.readTime }} 分钟阅读</span>
              <span>👁️ {{ post.views }} 阅读</span>
            </div>
            <div class="read-more">阅读更多 →</div>
          </div>
        </article>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredPosts.length === 0" class="empty-state fade-in">
        <div class="empty-icon">📝</div>
        <h3>暂无文章</h3>
        <p>没有找到匹配的文章，试试其他关键词吧</p>
      </div>
    </div>
  </div>
</template>

<script setup>
useHead({
  title: '博客',
})

const searchQuery = ref('')
const selectedTag = ref('全部')

const tags = ['全部', '技术', '设计', '生活', '思考']

// 示例文章数据
const posts = ref([
  {
    id: 1,
    slug: 'getting-started-with-nuxt3',
    title: '开始使用 Nuxt 3 构建现代化应用',
    description:
      '深入探索 Nuxt 3 的核心特性，学习如何使用最新的 Vue 3 组合式 API 和服务端渲染技术构建高性能的 Web 应用程序。',
    category: '技术',
    date: '2025-01-15',
    readTime: 5,
    views: 1234,
  },
  {
    id: 2,
    slug: 'gradient-design-guide',
    title: '如何打造炫酷的渐变色设计',
    description: '从色彩理论基础到实战技巧，全面掌握渐变色设计的精髓，让你的作品更加生动有趣。',
    category: '设计',
    date: '2025-01-10',
    readTime: 8,
    views: 856,
  },
  {
    id: 3,
    slug: 'year-2024-review',
    title: '我的 2024 年度总结',
    description:
      '回顾这一年的成长历程，分享在技术、工作和生活中的收获与思考，展望新一年的目标与期待。',
    category: '生活',
    date: '2025-01-01',
    readTime: 10,
    views: 2156,
  },
  {
    id: 4,
    slug: 'vue3-composition-api',
    title: 'Vue 3 组合式 API 最佳实践',
    description: '详细介绍 Vue 3 组合式 API 的使用技巧和最佳实践，帮助你写出更优雅、可维护的代码。',
    category: '技术',
    date: '2024-12-20',
    readTime: 12,
    views: 1689,
  },
  {
    id: 5,
    slug: 'ui-design-principles',
    title: 'UI 设计的基本原则与实战',
    description: '学习 UI 设计的核心原则，掌握如何创建既美观又实用的用户界面。',
    category: '设计',
    date: '2024-12-15',
    readTime: 7,
    views: 945,
  },
  {
    id: 6,
    slug: 'developer-productivity',
    title: '提升开发效率的10个技巧',
    description: '分享实用的开发技巧和工具，帮助你大幅提升编码效率，更快地完成项目。',
    category: '技术',
    date: '2024-12-10',
    readTime: 6,
    views: 1523,
  },
  {
    id: 7,
    slug: 'work-life-balance',
    title: '程序员如何平衡工作与生活',
    description: '探讨在高强度的技术工作中，如何保持身心健康，实现工作与生活的平衡。',
    category: '思考',
    date: '2024-12-05',
    readTime: 9,
    views: 1087,
  },
  {
    id: 8,
    slug: 'responsive-design-tips',
    title: '响应式设计实战指南',
    description: '从理论到实践，全面掌握响应式设计技术，让你的网站在各种设备上完美呈现。',
    category: '技术',
    date: '2024-11-28',
    readTime: 11,
    views: 1345,
  },
])

const filteredPosts = computed(() => {
  let result = posts.value

  // 按标签筛选
  if (selectedTag.value !== '全部') {
    result = result.filter(post => post.category === selectedTag.value)
  }

  // 按搜索词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(
      post =>
        post.title.toLowerCase().includes(query) || post.description.toLowerCase().includes(query)
    )
  }

  return result
})

const selectTag = tag => {
  selectedTag.value = tag
}

const formatDate = dateString => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}
</script>

<style scoped>
.blog-page {
  min-height: 100vh;
  padding: 2rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Page Header */
.page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 3rem 0;
}

.page-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

/* Filters */
.filters {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.search-box {
  padding: 1rem;
  border-radius: 16px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--text-primary);
  padding: 0.5rem;
}

.search-input::placeholder {
  color: var(--text-secondary);
}

.tags {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.tag-btn {
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  border: 2px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
}

.tag-btn.active {
  background: var(--rainbow-gradient);
  border-color: transparent;
  color: white;
}

/* Posts List */
.posts-list {
  display: grid;
  gap: 2rem;
}

.post-item {
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.post-tags {
  display: flex;
  gap: 0.5rem;
}

.post-tag {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--rainbow-gradient);
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.post-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.post-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.post-description {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.post-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.read-more {
  color: #667eea;
  font-weight: 600;
  transition: all 0.3s ease;
}

.post-item:hover .read-more {
  transform: translateX(5px);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.empty-state p {
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
  .page-header {
    padding: 2rem 0;
  }

  .post-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .post-title {
    font-size: 1.4rem;
  }
}
</style>
